<template>
  <div id="log">
    <header></header>
    <main>
      <div class="top">小仓管理系统 <span>-- 你身边的管理工具</span></div>
      <div class="box">
        <div class="hadd">
          <span>小仓仓库智能管理系统</span><span>用户登录</span>
        </div>
        <div class="left">
          <div><img src="../../images/login.webp" alt="" /></div>
          <div>
            <a-input v-model="userName" placeholder="请输入用户名">
              <a-icon slot="prefix" type="user" />
            </a-input>
            <br />
            <br />
            <a-input>
              <a-icon slot="prefix" type="user" />
            </a-input>
            <a-checkbox @change="onChange">是否记住密码</a-checkbox>
            <a-checkbox @change="onChange">是否免登陆</a-checkbox>
            <a-button type="primary" block> 登录 </a-button>
          </div>
        </div>
        <div class="footer">技术由xxxxxx支持</div>
      </div>
    </main>
    <footer></footer>
  </div>
</template>
<script>
//引入接口
import { getCodeApi } from "../../apis/loginApi";
export default {
  created() {},
};
</script>
<style lang="less" scoped>
#log {
  width: 100%;
  height: 100%;
  header {
    height: 40%;
    width: 100%;
    background: linear-gradient(rgb(153, 0, 255), rgb(255, 0, 221));
  }
  main {
    width: 600px;
    height: 300px;
    position: fixed;
    left: calc(50% - 300px);
    top: calc(50% - 200px);

    .top {
      width: 100%;
      text-align: center;
      font-size: 24px;
      color: aliceblue;

      height: 50px;
      span {
        font-size: 18px;
        margin-left: 20px;
      }
    }
    .box {
      width: 100%;
      height: 250px;
      background-color: aliceblue;
      box-shadow: 0px 0px 10px #000;
      .hadd {
        line-height: 30px;
        color: rgb(202, 81, 218);
        span:nth-child(1) {
          font-size: 16px;
          margin-left: 10px;
          padding-right: 20px;
          border-right: 1px solid #000;
        }
        span:nth-child(2) {
          font-size: 14px;
          margin-left: 20px;
        }
      }
      .left {
        display: flex;
        height: calc(100% - 60px);
        > div:nth-child(1) {
          flex: 1;
          padding: 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        > div:nth-child(2) {
          flex: 1;
          padding: 10px;
        }
      }
    }
  }
}
</style>